<template>
  <div class="container">
    <div v-if="props.page === '/'" class="description">
      <el-image :src="description"></el-image>
    </div>
    <div class="breadcrumb">
      <el-breadcrumb separator="|">
        <el-breadcrumb-item :to="{path: '/about'}">关于我们</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path: '/join'}">加入我们</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path: '/concat'}">联系我们</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path: '/arreement'}">用户协议</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path: '/private'}">隐私声明</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <p class="message">
      <span>家宅一生（北京）科技有限公司</span>
      <a href="_blank">京ICP备15059464号-4</a>
      <a href="_blank">京公网安备11010502047643号</a>
    </p>
    <p class="copyright">
      版权所有 2014-2022 好好住
    </p>
  </div>
</template>
<script lang="ts" setup>
import description from '../assets/description.png'

const props = defineProps<{
  page: string
}>()
</script>
<style scoped>
.container{
  text-align: center;
}

.description{
  height: 100px;
}

.container > .breadcrumb {
  display: inline-block;
  text-align: center;
}

.container :deep(.el-breadcrumb__inner.is-link){
  color: var(--ltd-color-grey);
  font-size: var(--ltd-footer-font-size);
}

.container :deep(
.el-breadcrumb__item
.el-breadcrumb__inner:hover
){
  color: var(--el-color-info);
  transition: var(--el-transition-color);
  cursor: pointer;
}

.message,
.message a {
  color: var(--ltd-color-grey);
  text-decoration: none;
}

.message a:hover{
  color: var(--el-color-info);
}

.message a:before{
  content: " ";
}

.copyright{
  color: var(--ltd-color-grey);
}
</style>